import { reactive, ref, computed } from "vue";
import { createReactiveVNode, type ReactiveVNodeApi } from "@/utils/ReactiveVNode.ts";

// Card 函数组件：接收响应式 props 和 children，返回 ReactiveVNodeApi
function Card(props: { title: string | any }, children?: any): ReactiveVNodeApi {
  // 使用 computed 包装，让 title 在渲染时才读取，从而追踪响应式依赖
  const titleRv = createReactiveVNode('h3', {}, computed(() => props.title))
  const contentRv = createReactiveVNode('div', { class: 'content' }, children || null)
  return createReactiveVNode('div', { class: 'card' }, [titleRv, contentRv])
}

// 示例1：元素 + 静态基础类型 children（不追踪更新）
const rv = createReactiveVNode('div', { class: 'static-box' }, 123)

// 示例2：组件用法，传入 Card 函数返回的 ReactiveVNodeApi
const cardProps = reactive({ title: 'Hello Card' })
const inner = createReactiveVNode('em', {}, 'inner')
const cardRv = Card(cardProps, ['slot text ', inner])

// 示例3：演示响应式更新（每秒修改 title）
const count = ref(0)
setInterval(() => {
  count.value++
  cardProps.title = `Card ${count.value}`
}, 1000)

// 根节点：导出 ReactiveVNodeApi，包含所有示例
export default createReactiveVNode('div', { class: 'app-root' }, [rv, cardRv])